<script lang="ts" setup>
import { computed, ref } from "vue";
import { getColor, getSize } from "../utils";

const props = withDefaults(
  defineProps<{
    direction?: string;
    justify?: string;
    padding?: string;
    gap?: number;
    align?: string;
    width?: string | number;
    height?: string | number;
    minHeight?: string | number;
    bgColor?: string;
    wrap?: boolean;
    radius?: string
  }>(),
  {
    direction: "vertical",
    wrap: false,
  }
);

const containerRef = ref<HTMLElement>();

const styles = computed<any>(() => {
  let justifyContentMap: any = {
    start: "flex-start",
    end: "flex-end",
    center: "center",
    between: "space-between",
  };
  let alignItemMap: any = {
    start: "flex-start",
    end: "flex-end",
    center: "center",
  };
  return {
    flexWrap: props.wrap ? "wrap" : null,
    justifyContent: props.justify !== undefined ? justifyContentMap[props.justify] : null,
    alignItems: props.align !== undefined ? alignItemMap[props.align] : null,
    width: props.width !== undefined ? getSize(props.width) : null,
    height: props.height !== undefined ? getSize(props.height) : null,
    minHeight: props.minHeight !== undefined ? getSize(props.minHeight) : null,
    background: props.bgColor !== undefined ? getColor(props.bgColor) : null,
    padding: props.padding,
    flexDirection: props.direction === "vertical" ? "column" : "row",
    gap: props.gap !== undefined ? `${props.gap}px` : null,
    borderRadius: props.radius,
  };
});

defineExpose({

  getInstance() {
    containerRef.value
  },
});
</script>

<template>
  <div class="umrp-container" ref="containerRef" :style="styles">
    <slot></slot>
  </div>
</template>

<style lang="scss" scoped>
.umrp-container {
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
}
</style>
